<template>
    <div class="tmsgBox"  ref="tmsgBox">
        <div class="tmsg-respond"  ref="respondBox">
            <h3>发表评论 <small v-show="isRespond" class="tcolorm" @click="removeRespond">取消回复</small></h3>
            <form class=""  >
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="说点什么呢``"
                  v-model="respondBox.content">
                </el-input>
                <el-button style="width: 920px" type="primary" plain @click="sendMsg">发送</el-button>
            </form>
        </div>
        <div class="tmsg-comments"  ref="listDom">
            <div class="tmsg-commentshow">
                <el-row class="tmsg-commentlist">
                    <el-col class="tmsg-c-item" v-for="(item,index) in commentList" :key="'common'+index">
                        <article class="">
                            <header style="display: flex">
                              <div>
                                <el-avatar class="avatar" :src="item.avatar"></el-avatar>
                              </div>
                              <div>
                                <div class="i-name">
                                    {{item.nickname}}
                                </div>
                                <div class="i-time">
                                    <time>{{item.create_time}}</time>
                                </div>
                                <div>
                                  <p v-html="item.content">{{item.content}}</p>
                                </div>
                              </div>
                            </header>
                            <section>
                                <div v-if="haslogin" class="tmsg-replay" @click="respondMsg(item.id)">
                                    回复
                                </div>
                            </section>
                        </article>
                    </el-col>

                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  props: {
    Article_id: Number
  },
  data () { // 选项 / 数据
    return {
      respondBox: {
        id: 0,
        avatar: sessionStorage.getItem('avatar'),
        content: '',
        create_time: null,
        email: '',
        nickname: sessionStorage.getItem('username'),
        forum_id: this.Article_id,
        parent_comment_id: ''
      }, // 评论表单
      isRespond: false,
      commentList: [], // 评论列表数据
      pageId: 0, // 当前第几页
      hasMore: true,
      haslogin: false,
      leaveId: 0, // 回复评论的当前的commentId
      pid: '', // 回复评论的一级commentId
      isChild: []
    }
  },
  methods: { // 事件处理器
    // 发送留言
    sendMsg: function () { // 留言
      var token = sessionStorage.getItem('token')
      this.$axios.defaults.headers.Authorization = 'Bearer ' + token
      this.$axios.post('forum/addComment', this.respondBox).then(response => {
        this.$message.success('评论成功!')
        this.showCommentList()
      }).catch(error => {
        console.log(error)
      })
    },
    respondMsg: function (leavePid, pid) { // 回复留言
    },
    removeRespond: function () { // 取消回复留言
      this.isRespond = false
      this.$refs.tmsgBox.insertBefore(this.$refs.respondBox, this.$refs.listDom)
    },
    showCommentList: function () { // 评论列表
      this.$axios.get('forum/getComment', {
        params: {
          fid: this.Article_id
        }
      }).then(response => {
        console.log(response.data)
        this.$set(this, 'commentList', response.data.data.records)
        for (let i = 0; i < this.commentList.length; i++) {
          if (this.commentList[i].parent_comment_id !== null) {
            this.isChild[i] = false
          } else {
            this.isChild[i] = true
          }
        }
      }).catch(error => {
        console.log(error)
      })
    },
    addMoreFun: function () { // 查看更多
      this.showCommentList(false)
    },
    routeChange: function () { // 重新加载
      this.showCommentList(true)
    }
  },
  components: { // 定义组件
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    // '$route':'routeChange'
  },
  created () { // 生命周期函数
    // console.log(this.$route);

  },
  mounted () { // 页面加载完成后
    this.showCommentList()
  }
}
</script>

<style>
.tmsgBox{
    width: 920px;
    position: relative;
    background: #fff;
    padding:15px;
    margin-bottom: 20px;
    border-radius: 5px;
}
.tmsg-respond h3{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}
.tmsg-respond h3 small{
    font-size: smaller;
    cursor: pointer;
}
.tmsg-respond textarea{
    background:#f4f6f7;
    height:100px;
    margin-bottom: 10px;
}
/*用户输入表单*/
.tmsg-r-info{
    margin:10px 0;
}
.tmsg-r-info input{
    height:30px;
    border-radius: 4px;
    background: #f4f6f7;
}
.tmsg-r-info .info-submit{
    margin: 10px 0;
    text-align: center;
}
.tmsg-r-info .info-submit p,.tmsg-commentshow h1{
    /*background: #97dffd;*/
    color:#fff;
    border-radius: 5px;
    cursor: pointer;
    /*transition: all .3s ease-in-out;*/
    height:30px;
    line-height: 30px;
    text-align: center;
}
/*.tmsg-r-info .info-submit p:hover{
    background: #47456d;
}*/
/*评论列表*/
.tmsg-comments .tmsg-comments-tip{
    display: block;
    border-left: 2px solid #363d4c;
    padding: 0 10px;
    margin: 40px 0;
    font-size: 20px;
}
.tmsg-commentlist {
    margin-bottom:20px;
}
.tmsg-commentshow>.tmsg-commentlist{
    border-bottom: 1px solid #e5eaed;
}
.tmsg-c-item{
    border-top: 1px solid #e5eaed;
}
.tmsg-c-item article{
    margin:20px 0;
}
.tmsg-c-item article header{
    margin-bottom:10px;
}
.tmsg-c-item article header img:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}
.i-name{
    font-size: 14px;
    margin:5px 8px 7px 0;
    color:#444;
    font-weight: bold;
    display: inline-block;
}
.tmsg-c-item article header .i-class{
    display: inline-block;
    margin-left:10px;
    background: #dff0d8;
    color:#3c763d;
    border-radius: 5px;
    padding: 3px 6px;
    font-size: 12px;
    font-weight: 400;
}
.i-time{
    color:#aaa;
    font-size: 12px;
}
.tmsg-c-item article section{
    margin-left: 80px;
}
.tmsg-c-item article section p img{
    vertical-align: middle;
}
.tmsg-c-item article section .tmsg-replay{
    margin:10px 0;
    font-size: 12px;
    color:#64609E;
    cursor: pointer;
}
.avatar {
  cursor: pointer;
}
</style>
